<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">  <!-- 定义文档的字符编码为 utf-8 -->
    <title></title>  <!-- 网页的标题 -->
    <script src="vue.js" type="text/javascript" charset="utf-8"></script>  <!-- 引入 Vue.js 库 -->
</head>
<body>
    <div id="app">  <!-- 定义一个具有 id 为"app"的 div 元素 -->
        <div>{{ counter }}</div>  <!-- 展示数据变量 counter 的值 -->
        <button v-on:click="increment">点击自增 </button>  <!-- 定义一个按钮，绑定点击事件 increment -->
    </div>
    <script type="text/javascript">
        new Vue({  // 创建一个新的 Vue 实例
            el: '#app',  // 指定实例挂载的 DOM 元素的选择器
            data: {  // 定义数据对象
                counter: 0  // 初始化数据变量 counter 为 0
            },
            methods: {  // 定义实例的方法
                increment: function() {  // 定义 increment 方法
                    this.counter++;  // 每次调用使 counter 自增 1
                }
            }
        });
    </script>
</body>
</html>